﻿
<div class="contentMain">
	<div class="grayBox">
		<div class="mapBox">
			<h2>Map 地图</h2>
			<div class="explain">
				<ul>
					<li class="dotColor dotColorcd27ad">AEWE  <span>Asher & Wendy Eng</span></li>
					<li class="dotColor dotColorffc000">CCCC  <span>Caleb & Christina Chan</span></li>
					<li class="dotColor dotColorff6c00">HSFL  <span>Chan Hon Shek & Fung Ling  </span></li>
					<li class="dotColor dotColorc61902">KMHT  <span>Cheng Kim Meng & Huey Teng</span></li>
					<li class="dotColor dotColor10e900">ESJS  <span>Eugene & Julie Seow  </span></li>
				</ul> 


				<ul>
					<li class="dotColor dotColor009a2f">ETDT  <span>Eugene & Dorothy Tan</span></li>
					<li class="dotColor dotColor00eeae">PCHC  <span>Patrick & Hazel Chew </span></li>
					<li class="dotColor dotColor78ff82">PWLC  <span> Poh Wee Long & Cristabel   </span></li>
					<li class="dotColor dotColor00e4ff">ROJO  <span> Richard & Jenny Ong</span></li>
				</ul>  

				<ul>
					<li class="dotColor dotColor378adf">RLLF  <span>Roland Lee & Lai Fun</span></li>
					<li class="dotColor dotColorabafff">SYMY  <span>Simon & Marilyn Yee </span></li>
					<li class="dotColor dotColord86fff">TTYF  <span> Yong Tai Tong & Yim Fun   </span></li>
					<li class="dotColor dotColorfcff00">OTHR  <span> Others</span></li>
				</ul>
			</div>
			<div id="post_map" class="map" style="width:100%; height:400px"></div>
		</div>
	</div>
</div>
<?
	foreach($posts as $key => $post)
	{
		$posts[$key]['User']['avatar_small'] = $thumb->image($post['User']['avatar'], 50);
	}
?>
<script src="http://www.google.com/jsapi"></script>
<!--<script src="http://maps.google.com/maps/api/js?sensor=false"></script>-->

<script type="text/javascript">
	google.load('maps', '3', {other_params: 'sensor=false'});
</script>
<?echo $this->Html->script('infobox');?>

<script type="text/javascript">
google.setOnLoadCallback(initialize);
var data_points = <?=json_encode($posts)?>;

function initialize() {
	var center = new google.maps.LatLng(1.35, 103.83);
	var map = new google.maps.Map($('#post_map')[0], {
		zoom: 11,
		center: center,
		mapTypeId: google.maps.MapTypeId.ROADMAP,
		navigationControl: true,      
		navigationControlOptions: {
			style: google.maps.NavigationControlStyle.ZOOM_PAN,
			position: google.maps.ControlPosition.TOP_RIGHT
		},
		mapTypeControl: false
	});
	
	var bounds = new google.maps.LatLngBounds();
	
	for(id in data_points)
	{
		var data_point = data_points[id];
		var latlng = new google.maps.LatLng(data_point.Post.latitude, data_point.Post.longtitude);
		
		marker = new google.maps.Marker({
			position: latlng,
			map: map,
			icon: new google.maps.MarkerImage('http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=O|'+data_point.Team.color+'|000000',
					new google.maps.Size(24, 34),
					new google.maps.Point(0,0),
					new google.maps.Point(12, 34)
				)
		});		
		marker.setAnimation(google.maps.Animation.DROP);

		var contentString = 
					'<a href="<?=$this->webroot?>'+ data_point.Post.type_name +'/view/'+ data_point.Post.id +'" class="avatar" style="margin-right:5px;  overflow-y:hidden; height: 50px" target="_blank"><img src="<?=$this->webroot?>img/'+ data_point.User.avatar_small +'"  /></a>'+
					'<div class="rightCol">'+
						'<a href="<?=$this->webroot?>'+ data_point.Post.type_name +'/view/'+ data_point.Post.id +'" target="_blank">'+ data_point.User.name +'</a>'+
						'<p>'+ data_point.Post.description + '</p>'+
					'</div>';

		// var infowindow = new google.maps.InfoWindow({
			// content: contentString
		// });
		// open(map, marker, infowindow);
		var boxText = document.createElement("div");
		boxText.style.cssText = "border: 1px solid black; margin-top: 8px; background: #1a1a1a; padding: 5px; width:auto; height: 60px;  border-radius: 6px 6px 6px 6px;";
		boxText.innerHTML = contentString;
 
		var myOptions = {
			 content: boxText
			,disableAutoPan: false
			,maxWidth: 0
			,pixelOffset: new google.maps.Size(-140, -120)
			,zIndex: null
			,boxStyle: { 
			  // background: "url('<?$this->webroot?>img/tipsBoxTop.gif') no-repeat"
			  opacity: 1
			  ,width: "280px"
			 }
			,closeBoxMargin: "10px 2px 2px 2px"
			,closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif"
			,infoBoxClearance: new google.maps.Size(1, 1)
			,isHidden: false
			,pane: "floatPane"
			,enableEventPropagation: false
		};
 
		var ib = new InfoBox(myOptions);
		
		open_box(map, marker, ib);
	}
}

function open_box(map, marker, ib){
	google.maps.event.addListener(marker, "click", function (e) {
		ib.open(map, marker);
	});
}
</script>